<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script>
        /*
        js中事件有很多，但是常用的事件如下：
        onload  浏览器中页面文档加载完成后触发 (包括了网页中结构 音乐 视屏 图片等)
        onclick 鼠标单击事件
        onfocus 获得焦点事件
        onblur 失去焦点事件
        onsubmit 表单提交事件  当函数中返回false不提交  返回true提交
        onmouseover 鼠标移入事件
        onmouseout 鼠标移出事件
        onkeydown 键盘按下事件
        onkeyup 键盘弹起
        onkeypress  键盘按下产生字符
        onchange 文本框内容发生变化事件 失去光标
        oninput 输入框中输入内容变化



        
        */

        window.onload=function(){
            //获得input对象
           var input = document.querySelector("#username");
           //获取焦点执行
           input.onfocus=function(){
                console.log("获得焦点");
                this.style.background="pink";
           }
           
           //失去光标执行
           input.onblur=function(){
                console.log("失去焦点");
                input.style.background="white";
           }

           //当表单提交时验证相关的内容
           document.querySelector("#myform").onsubmit=function(){

            //一般在提交时间中做表单的验证信息 出现问题返回false 否则返回true提交
          var inputs =  document.querySelectorAll("input");
       


          console.log(inputs[1].value);
          //判断用户名 获取value属性
          if(inputs[1].value == "" || inputs[1].value.length < 6){
            alert("长度需要6位以上");
            return false;
          }
          //省略n个验证

            return true;//通过验证 提交

           }
   
           //设置div鼠标移入移出效果
           var box = document.querySelector(".box");
           //鼠标移入
           box.onmouseover=function(){
              this.style.background="pink";
           }
           /* 鼠标移出 */
           box.onmouseout=function(){
              this.style.background="red";
           }


           //键盘事件
           input.onkeydown=function(event){
            if(event.keyCode == 13){
                alert("您确定要提交吗?")
            }
           }
           input.onkeyup=function(){}
           input.onkeypress=function(){}


           input.onchange=function(){
            console.log(this.value);
           }

           input.oninput=function(){
            console.log(this.value+"aaaa");
           }

        }
    </script>
</head>
<body>
    <input type="text" id="username">
    <hr>
    <form action="#" method="post" id="myform">
        用户名：<input type="text" name="username"> <br>
        密码：<input type="password" name="password"> <br>
        <input type="submit">
    </form>
    
    <div class="box"></div>
</body>
</html>